let user= document.querySelector('.user')
let userText= document.querySelector('.user-text')

let tel= document.querySelector('.tel')
let telText= document.querySelector('.tel-text')

let credit= document.querySelector('.credit')
let creditText= document.querySelector('.credit-text')

let pwd= document.querySelector('.pwd')
let pwdText= document.querySelector('.pwd-text')

let Img= document.querySelectorAll('.register-pan img')
let Input= document.querySelectorAll('.register-pan input')

// 第一种方法：
// Input.forEach(function(dom,i){
//     dom.addEventListener('input',function(){
//         if(this.value.length >0){
//             Img[i].style.display='block'
//         }else{
//             Img[i].style.display='none'
//         }
//     })
// })

// Img.forEach(function(dom,i){
//     dom.addEventListener('click',function(){
//         Input[i].value=''
//         this.style.display='none'
//     })
// })


// // 正则表达式，检查收入的用户名手否正确
// let userReg=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
// // 正则表达式,检查输入的手机号是否正确
// let TelReg=/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
// // 正则表达式，检查输入的验证码是否正确
// let creditReg=/^[a-zA-Z][a-zA-Z0-9_]{3}$/;
// // 正则表达式,检查输入的密码是否有六位
// let pwdReg=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/

// user.addEventListener('blur',function(){
//     let bool =userReg.test(user.value)
//     if(!bool){
//         userText.style.display='block'
//     }else{
//         userText.style.display='none'
//     }
// })

// tel.addEventListener('blur',function(){
//     let bool =TelReg.test(tel.value)
//     if(!bool){
//         telText.style.display='block'
//     }else{
//         telText.style.display='none'
//     }
// })

// credit.addEventListener('blur',function(){
//     let bool =creditReg.test(credit.value)
//     if(!bool){
//         creditText.style.display='block'
//     }else{
//         creditText.style.display='none'
//     }
// })

// pwd.addEventListener('blur',function(){
//     let bool=pwdReg.test(pwd.value)
//     if(!bool){
//         pwdText.style.display='block'
//     }else{
//         pwdText.style.display='none'
//     }
// })

// let registerRead= document.querySelector('.register-read')
// let registerBbtn= document.querySelector('.register-bbtn')

// let flag=true
// registerRead.addEventListener('click',function(){
//     if(flag){
//         registerBbtn.style.backgroundColor='#00bdff'
//         registerBbtn.style.color='#fff'
//     }else{
//         registerBbtn.style.backgroundColor='#e0e0e0'
//         registerBbtn.style.color='#5f5f5f'
//     }
//     flag=!flag
// })

// registerBbtn.addEventListener('click',function(){
//     if(!userReg.test(user.value)){
//         userText.style.display='block'
//     }else if(!TelReg.test(tel.value)){
//         telText.style.display='block'
//     }else if(!creditReg.test(credit.value)){
//         creditText.style.display='block'
//     }else if(!pwdReg.test(pwd.value)){
//         pwdText.style.display='block'
//     }else if(!flag){
//         return
//     }else{
//         location.href='./href.html'
//     }
// })

// 第二种方法：
let rReg=[
    /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/,
    /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
    /^[a-zA-Z][a-zA-Z0-9_]{3}$/,
    /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/
]
let registerErroMsg= document.querySelectorAll('.register-erroMsg')

let registerRead= document.querySelector('.register-read')
let registerBbtn= document.querySelector('.register-bbtn')

Input.forEach(function(dom,i){
    dom.addEventListener('blur',function(){
        let bool=rReg[i].test(dom.value)

        if(bool){
            registerErroMsg[i].style.display='none'
        }else{
            registerErroMsg[i].style.display='block'
        }
    })
})

registerRead.addEventListener('change',function(){
    if(registerRead.checked){
        registerBbtn.disabled=false
        registerBbtn.style.backgroundColor='#00bdff'
        registerBbtn.style.color='#fff'
    }else{
        registerBbtn.disabled=false
        registerBbtn.style.backgroundColor='#e0e0e0'
        registerBbtn.style.color='#5f5f5f'
    }
})

registerBbtn.addEventListener('click',function(){
    for(let i=0; i<Input.length; i++){
        let bool=rReg[i].test(Input[i].value)
    
            if(bool){
                registerErroMsg[i].style.display='none'
            }else{
                registerErroMsg[i].style.display='block'
                return
            }
    }  
})